<template>
  <div class="big-dialog2" @click="onBgClick">
    <div class="big-dialog2-main">
      <span class="cron cron-tl"></span>
      <span class="cron cron-tr"></span>
      <span class="cron cron-bl"></span>
      <span class="cron cron-br"></span>
      <div class="big-dialog2-head">
        <!--        <div class="big-dialog2-back" @click="onClose">
                  点击关闭
                </div>-->
        <div class="big-dialog2-tools"></div>
      </div>

      <div class="big-dialog2-inner">
        <slot></slot>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'big-dialog',
  props: {
    visible: false
  },
  data() {
    return {}
  },
  methods: {
    onBgClick(e) {
      e.stopPropagation()
      if (e && e.target) {
        if (e.target.classList.contains('big-dialog2')) {
            this.onClose()
        }
      }
    },
    onClose() {
      this.$emit('onClose')
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.big-dialog2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, .9);
  padding: 115px 105px;

  &-main {
    height: 100%;
    position: relative;
    border: 3px solid #00959B;

    .cron {
      width: 70px;
      height: 70px;
      position: absolute;
      border: 3px solid #00E7FC;

      &-tl {
        left: 5px;
        top: 5px;
        border-right: 0;
        border-bottom: 0;
      }

      &-tr {
        right: 5px;
        top: 5px;
        border-left: 0;
        border-bottom: 0;
      }

      &-bl {
        left: 5px;
        bottom: 5px;
        border-right: 0;
        border-top: 0;
      }

      &-br {
        right: 5px;
        bottom: 5px;
        border-left: 0;
        border-top: 0;
      }
    }
  }

  &-head {
    position: absolute;
    left: 130px;
    top: 85px;
    font-size: 68px;
  }

  &-back {
    float: left;
    cursor: pointer;
    margin-right: 150px;

    &:hover {
      color: #FFd200;
    }
  }

  &-tools {
    display: inline-block;
  }

  &-inner {
    position: absolute;
    top: 3%;
    bottom: 2%;
    left: 130px;
    right: 130px;
  }
}
</style>
